<template>
    <view class="guide" :style="{ height : screenHeight+ 'px' }">
        <swiper class="flex1" interval="3000" :show-indicators="false" :auto-play="autoPlay" @change="sliderChange" :infinite="false" :forbid-slide-animation="false" :vertical="false"  :style="{ width: screenWidth+ 'px',height : screenHeight+ 'px' }">
            <swiper-item class="flex1" v-for="(img, index) in imageList" :key="index">
                <view class="flex1view" @click="launchAppIndex" :style="{ width: screenWidth+ 'px',height : screenHeight+ 'px' ,overflow:'hidden'}">
                    <!-- #ifndef APP-PLUS -->
                    <image class="flex1img" mode="scaleToFill" lazy-load style="flex-shrink: 0;"  :src="img.src" />
                    <!-- #endif -->

                    <!-- #ifdef APP-PLUS -->
                    <image class="flex1img" resize="contain" :src="img.src" />
					
                    <!-- #endif -->
                </view>
            </swiper-item>
        </swiper>
		<view class="btn animated bounceInUp fast" v-if="currIndex == (imageList.length-1)" @tap.stop="launchApp">
			{{i18n.jumpNow}}
		</view>
        <!-- <view class="swiper-to-home" @tap.stop="launchApp"><text class="swiper-to-home-text">{{i18n.jump}}</text></view> -->
    </view>
</template>

<script>
	const SystemInfo = uni.getSystemInfoSync();
	export default {
		computed:{
			i18n() {
				return this.$t('message');
			}
		},
		data() {
			return {
				 imageList: [
					{
						src: '../../static/imgs/start01.png'
					},
					{
						src: '../../static/imgs/start02.png'
					},
					{
						src: '../../static/imgs/start03.png'
					},
					{
						src: '../../static/imgs/start04.png'
					}
				],
				autoPlay: false,
				currIndex: 0,
				screenWidth: '',
				screenHeight:''
			};
		},
		onLoad(){
			uni.getSystemInfo({
				success: (res) => {
					let width = res.windowWidth;
					this.screenWidth = width;
					this.screenHeight = res.windowHeight;
					console.log(res);
				}
			})
		},
		methods:{
			sliderChange(e) {
				this.currIndex = e.detail.current;
			},
			launchAppIndex() {
				if (this.imageList.length == this.currIndex + 1) {
					this.launchApp();
				} else {
					return;
				}
			},
			launchApp() {
				// 直接到APP 且下次不再显示引导页
				uni.setStorage({
					key: 'launchFlag',
					data: true,
					success() {
						uni.redirectTo({
							url:'/pages/guide/index'
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
	.guide {
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.flex1 {
		flex: 1;
	}
	.flex1view{
		flex: 1;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.flex1view .flex1img{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.apptestnnnn {
		border-width: 1px;
		border-color: #4cd964;
		border-style: solid;
	}
	.apptest {
		border-width: 1px;
		border-color: #007aff;
		border-style: solid;
	}
	.swiper-to-home {
		position: absolute;
		z-index: 999;
		right: 40rpx;
		/* #ifndef MP */
		top: 80rpx;
		/* #endif */
		/* #ifdef MP */
		top: 150rpx;
		/* #endif */
	}
	.btn{
		position: absolute;
		left: 38%;
		bottom: 50upx;
		transform: translateX(50%);
		width: 200upx;
		line-height: 80upx;
		height: 80upx;
		text-align: center;
		background-color: #26efe2;
		color: #FFFFFF;
		border-radius:20upx;
		z-index: 9999;
	}
	.swiper-to-home-text {
		color: #ffffff;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
		border-width: 1rpx;
		border-color: #ffffff;
		border-style: solid;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.indicator {
		width: 714rpx;
		height: 30rpx;
		position: absolute;
		bottom: 50rpx;
		left: 1rpx;
		item-color: #f6f6f6;
		item-selected-color: #fd575c;
		item-size: 20rpx;
	}
</style>
